<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>当当网</title>
    <style type="text/css">
        .frame{
            margin: 0 auto;
        }

        div{
            width: 1100px;
            padding: 0;
        }
        .logo{
            float: left;
            width: 120%;
        }
        .advising{
            float: right;
            width:358px;
		    height: 35px;
            line-height: 35px;
            margin-top: 10px;
            
            background-color: rgb(234,255,250);
            /* background-image: url(../img/icon_count.png);
            /* background-position: 0 0; */
            /* background-repeat: no-repeat; */
            /* background-position: 0 -10px;  */
        }
        .advising a{
            display: inline-block;
            margin-right: 30px;
            margin-left: 5px;
            color: rgb(171,180,178);
            font-size: 14px;
            text-decoration: none;
        }
        
        .advising img{
            position: relative;
            float: left;
            left: 20px;
            top: -42px;
        }

        nav{
            clear: both;
            background-color: rgb(254,105,21);
            margin-top: -15px;
        }
        nav ul{
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: left;
            padding: 0;
            padding-left: 20px;
            
        }
        nav ul li{
            float: left;
            margin-right: 32px;
            list-style-type: none;
           
            
        }
        nav a{
            text-decoration: none;
            color: white;
        }
        .h-footer{
            width: 1000px;
            margin-top: -5px;
        }
        
        .content{
            border: 1px solid rgb(204,233,172);
            padding-top: 15px;
            height: 350px;
        }
        .bg_bang{
            padding-bottom: 30px;
        }
        
        .bookDescDiv1{
            /* background-color: green; */
            width: 640px;
            height: 200px; 
            float: left;
        }
        .bookDescDiv2{
            /* background-color: deepskyblue; */
            width: 460px;
            height: 140px; 
            float: left;
        }
        .bookDescDiv3{
            /* background-color: gray; */
            width: 460px;
            height: 140px; 
            float: left;
        }

        .bookNo1{
            position: relative;
            left: 20px;
            top: -265px;
        }
        .bookNo2{
            position: relative;
            /* left: -100px; */
            top: -115px;
        }
        .book1{
            display: inline-block;
            width: 250px;
            /* height: 300px; */
            /* background-color: blue; */
            float: left;
        }
        .book1Desc1{
            /* display: inline-block; */
            width: 320px;
            /* height: 400px; */
            /* background-color: aqua; */
            float: left;
        }
        .book1Desc1 p{
            width: 335px;
            display: inline-block;
            /* line-height: 14px; */
            margin: 2px;
            line-height: 25px;
            font-size: 14px;
        }
        .bookTitle{
            font-size: 16px;
            color: rgb(97,149,202);
            text-decoration: none;
        }
        .bookPrice{
            font-weight: bold;
            color: rgb(149,29,43);
        }
        .discount{
            color: rgb(160,202,191);
        }
        .book2{
            width: 100px;
            height: 130px;
            /* background-color: aquamarine; */
            float: left;
        }
        .book3{
            width: 100px;
            height: 130px;
            /* background-color: blueviolet; */
            float: left;
        }

        .pageFooter{
            text-align: center;
        }
        .footInfo{
            position: relative;
            top: -25px;
            color: rgb(193,176,171);
            font-size: 14px;
        }
        .footInfo img{
            position: relative;
            top: 15px;
        }
    </style>
</head>
<body>
    <div id="frame" class="frame" >
            <header>
                <div id="header">
                    <img id="logo" src="../img/logo.jpg">
                    <span class="advising">
                            <a href="#" target="_blank" id = "first-adv">尾品汇</a>
                            <a href="#" target="_blank">当当优品</a>
                            <a href="#" target="_blank">数字馆</a>
                            <a href="#" target="_blank">都看阅器</a>
                            <img src="../img/icon_count.png">
                    </span>
                </div>
                <div class="navbar">
                    <nav>
                        <ul>
                            <li><a href="#" target="_blank">首页</a></li>
                            <li><a href="#" target="_blank">图书</a></li>
                            <li><a href="#" target="_blank">音像</a></li>
                            <li><a href="#" target="_blank">童装</a></li>
                            <li><a href="#" target="_blank">服装</a></li>
                            <li><a href="#" target="_blank">鞋靴</a></li>
                            <li><a href="#" target="_blank">运动</a></li>
                            <li><a href="#" target="_blank">箱包</a></li>
                            <li><a href="#" target="_blank">美妆</a></li>
                            <li><a href="#" target="_blank">珠宝</a></li>
                            <li><a href="#" target="_blank">家居</a></li>
                            <li><a href="#" target="_blank">食品</a></li>
                            <li><a href="#" target="_blank">酒</a></li>
                            <li><a href="#" target="_blank">手机</a></li>
                            <li><a href="#" target="_blank">数码</a></li>
                            <li><a href="#" target="_blank">电脑</a></li>
                            <li><a href="#" target="_blank">家电</a></li>
                        </ul>
                    </nav>
                </div>
                <div class="h-footer">
                    <img src="../img/banner.png" width="110%">
                </div>
            </header>
            <div class="content">
                <img src="../img/bg_bang.gif" class="bg_bang" />
                <!-- <p style="clear:both;"></p> -->
                <div style="clear:both;"></div>
                <div class="bookDescDiv1">  
                    <div class="book1">
                        <img src="../img/book-01.jpg" class="boookImg1" />
                        <img src="../img/bookNo1.gif" class="bookNo1"/>
                    </div>
                    <div class="book1Desc1">
                        <p><a href="#" target="_blank" class="bookTitle"> 偷影子的人</a></p>
                        <p>作者：[法]马克·李维（Marc Levy）著</p>
                        <p>出版社：湖南文艺出版社</p>
                        <p>当当价：<span class="bookPrice">￥17.90</span></p>
                        <p>不知道姓氏的克雷儿，这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。一个老是爱班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”</p>
                    </div>
                </div>
                <div class="bookDescDiv2">
                        <div class="book2">
                                <img src="../img/book-02.jpg" class="boookImg1" />
                                <img src="../img/bookNo2.gif" class="bookNo2"/>
                            </div>
                            <div class="book1Desc1">
                                    <p><a href="#" target="_blank" class="bookTitle"> 看见（央视1知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</a></p>
                                    <p>作者：柴静&nbsp;著</p>
                                    <p>出版社：广西师范大学出版社</p>
                                    <p><span class="bookPrice">￥17.90</span> &nbsp;&nbsp;&nbsp;<span class="discount">7.4折</span></p>
                            </div>
                </div>
                <div class="bookDescDiv3">
                    <div class="book3">
                        <img src="../img/book-03.jpg" class="boookImg1" />
                        <img src="../img/bookNo3.gif" class="bookNo2" />
                    </div>
                    <div class="book1Desc1">
                            <p><a href="#" target="_blank" class="bookTitle">改变孩子先改变自己</a></p>
                            <p>作者：贾容韬&nbsp;贾毅&nbsp;著</p>
                            <p>出版社：作家出版社</p>
                            <p><span class="bookPrice">￥22.20</span> &nbsp;&nbsp;&nbsp;<span class="discount">7.4折</span></p>
                    </div>
                </div>
                
            </div>
            <div class="pageFooter">
                <p class="footInfo">Copyright(c)&nbsp;当当网&nbsp;2004-2017,All Rights Reserved<img src="../img/validate.gif" />京ICP证041189号出版物经营许可证&nbsp;新出发京批字第直0673号</p>
            </div>
    </div>
    

</body>
</html>